import './App.css';

const skills =[
  {
    skill:"HTML+CSS",
    level:"advanced",
    color:"#2662EA"
  },
  {
    skill:"Javascript",
    level:"advanced",
    color:"#EFD81D"
  },
  {
    skill:"Web Dsign",
    level:"advanced",
    color:"#C3DCAF"
  },
  {
    skill:"Git and Github",
    level:"advanced",
    color:"#E84F33"
  },
  {
    skill:"React",
    level:"advanced",
    color:"#60DAFB"
  },
    {
        skill:"Svelte",
        level:"advanced",
        color:"#60DAFC"
    },
]

function App() {
  return (
    <div className={"card"}>
        <Avatar />
        <div className={"data"}>
            <Intro />
            <SkillList />
        </div>
    </div>
  );
}

function Avatar(){
    return <img className={"avatar"} src={"buer.jpeg"} alt={"Jonas Kebi"}/>
}

function Intro(){
    return (
        <div>
            <h1>Jonas Kebi</h1>
            <p>
                Full-stack web developer and teacher at Udemy.When not coding or preparing a course,I like to play board games,to cook (and eat),or to just enjoy the Portuguese sun at the beach.
            </p>
        </div>
    )
}

function SkillList(){
  return(
      <div className={"skill-list"}>
          {
              skills.map(
                  skill=>
                      <Skill
                          skill={skill.skill}
                          color={skill.color}
                          level={skill.level} />
              )
          }
      </div>
  )
}

function Skill({skill,color,level}){
  return(
      <div className={"skill"} style={{backgroundColor:color}}>
        <span>{skill}</span>
        <span>{level}</span>
      </div>
  )
}

export default App;
